<template>
  <div class="shop">
    <van-sticky>
      <van-nav-bar :title="$route.meta.title" left-arrow @click-left="onClickLeft" style="width:100%;" />
    </van-sticky>
    <van-form @submit="onSubmit">
      <van-cell-group class="shop-info" :border="false">
        <van-field input-align="right" label="店铺名称" v-model="shopname" placeholder="请输入店铺名称" />
        <van-field input-align="right" label="地址" v-model="local" placeholder="请输入店铺地址" @click="showArea = true" readonly is-link />
        <van-field input-align="right" label="详细地址" v-model="address" placeholder="请输入详细地址" />
        <van-field input-align="right" label="电话" v-model="tel" placeholder="请输入联系电话" />
        <van-field input-align="right" is-link label="营业时间" v-model="time1" readonly placeholder="请选择时间" @click="showPicker1 = true" />
        <van-field input-align="right" is-link label="打烊时间" v-model="time2" readonly placeholder="请选择时间" @click="showPicker2 = true" />
        <van-field input-align="right" label="店铺图片" readonly center>
          <template #input>
            <van-uploader v-model="shopimg" class="shop-info-shopimg" :max-count="1" :max-size="5120 * 1024" @oversize="onOversize" :after-read="afterRead" />
          </template>
        </van-field>
        <van-field input-align="right" label="小程序二维码" readonly center>
          <template #input>
            <van-uploader v-model="qrcode" class="shop-info-shopimg" :max-count="1" :deletable="false" />
          </template>
        </van-field>
        <div class="spacing"></div>
        <!-- <van-field input-align="right" label="配送范围" type="number" v-model="range" placeholder="配送范围">
          <template #extra><span style="margin-left: 5px;">KM</span></template>
        </van-field> -->
        <van-field input-align="right" label="配送费用" type="number" v-model="sendcost" placeholder="请输入费用">
          <template #extra><span style="margin-left: 5px;">元</span></template>
        </van-field>
        <van-field input-align="right" label="起送金额" type="number" v-model="sendmoney" placeholder="请输入金额" :border="false">
          <template #extra><span style="margin-left: 5px;">元</span></template>
        </van-field>
        <van-field label="店铺状态" input-align="right">
          <template #input>
            <van-radio-group v-model="state" checked-color="#1bb89c" direction="horizontal">
              <van-radio :name="1">营业</van-radio>
              <van-radio :name="2">打烊</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <div class="spacing"></div>
        <van-field label="简介" v-model="introduce" class="shop-info-introduce" :autosize="{minHeight:80}" placeholder="请输入简介" maxlength="150" show-word-limit type="textarea">
        </van-field>
      </van-cell-group>
      <div class="shop-save">
        <van-button round type="info" color="#1bb89c" native-type="submit">保 存</van-button>
      </div>
    </van-form>
    <!-- 省/市/区列表 -->
    <van-popup v-model="showArea" position="bottom" round>
      <van-area :area-list="areaList" @confirm="onArea" @cancel="showArea = false" />
    </van-popup>
    <!-- 营业开始时间 -->
    <van-popup v-model="showPicker1" position="bottom" round>
      <van-datetime-picker type="time" @confirm="onConfirm1" :formatter="formatter" @cancel="showPicker1 = false" />
    </van-popup>
    <!-- 营业结束时间 -->
    <van-popup v-model="showPicker2" position="bottom" round>
      <van-datetime-picker type="time" @confirm="onConfirm2" :formatter="formatter" @cancel="showPicker2 = false" />
    </van-popup>
  </div>
</template>

<script>
import { areaList } from "@vant/area-data";
import { ImagePreview, Toast } from 'vant';
export default {
  name: 'Shop',
  data () {
    return {
      id: '',
      areaList,
      nowareaList: [],
      showArea: false,
      showPicker1: false,
      showPicker2: false,
      shopname: '',
      local: '',
      address: '',
      tel: '',
      time1: '',
      time2: '',
      shopimg: [],
      qrcode: [],
      defimg: [],
      imagesurl: '',
      // range: '',
      sendcost: '',
      sendmoney: '',
      introduce: '',
      state: 1,
      sinfo: [],
    };
  },
  methods: {
    onClickLeft () {
      this.$router.go(-1)
    },
    // 店铺图片限制
    onOversize () {
      Toast.fail("图片大小不能超过5M");
    },
    // 图片预览
    showImage (img) {
      var image = [img];
      ImagePreview({
        images: image,
        showIndex: false,
      });
    },
    // 省市区
    onArea (val) {
      this.nowareaList = val;
      this.local = val
        .filter((item) => !!item)
        .map((item) => item.name)
        .join("/");
      this.showArea = false;
    },
    onConfirm1 (time) {
      this.time1 = time;
      this.showPicker1 = false;
    },
    onConfirm2 (time) {
      this.time2 = time;
      this.showPicker2 = false;
    },
    // 格式化弹出层时间
    formatter (type, value) {
      if (type === 'hour') {
        return `${value}时`
      } else if (type === 'minute') {
        return `${value}分`
      }
      return value
    },
    onStart (time) {
      this.start = time;
      this.Starts = false;
    },
    onEnd (time) {
      this.end = time;
      this.Ends = false;
    },
    getshopInfo () {
      this.$axios("/shops/getshopsinfo", {
        // handle: "ajax", //编辑时提交
        type: 2
      })
        .then(res => {
          this.sinfo = res.data.data
          let datas = res.data.data
          this.shopname = datas.shopname
          this.local = datas.province + '/' + datas.city + '/' + datas.district
          this.address = datas.address
          this.tel = datas.shopphone
          this.time1 = datas.openat
          this.time2 = datas.closeat
          this.shopimg = [{ url: this.img + datas.imagesurl }]
          this.qrcode = [{ url: 'http://freeze.ganmiaoedu.com/' + datas.qrcode }]
          // this.range = datas.deliveryscope
          this.sendcost = datas.deliveryfee
          this.sendmoney = datas.feescope
          this.introduce = datas.remark
          this.state = datas.state
          this.defimg = [datas.imagesurl]
          if (datas.imagesurl == null || datas.imagesurl == '') {
            this.shopimg = []
            this.qrcode = []
          } else {
            this.shopimg = [{ url: this.img + datas.imagesurl }]
            this.qrcode = [{ url: 'http://freeze.ganmiaoedu.com/' + datas.qrcode }]
          }
        })
        .catch((err) => {
          console.error("加载失败" + err);
        })
    },
    // 图片上传状态
    afterRead (file) {
      file.status = "uploading";
      file.message = "上传中...";
      let params = new FormData();
      params.append("file", file.file);
      this.$notoken("/main/upload", params)
        .then((res) => {
          this.imagesurl = res.data.data;
          this.defimg.splice(0, 1, this.imagesurl)
        });
      setTimeout(() => {
        file.status = "done";
        file.message = "上传成功";
      }, 1000);
    },
    // 编辑
    onSubmit () {
      var joins = this.defimg.join() // 多图用，隔开
      this.$axios("/shops/getshopsinfo", {
        type: 2,
        handle: "ajax", //编辑时提交
        shopname: this.shopname,
        province: this.nowareaList == '' ? this.sinfo.province : this.nowareaList[0].name,
        city: this.nowareaList == '' ? this.sinfo.city : this.nowareaList[1].name,
        district: this.nowareaList == '' ? this.sinfo.district : this.nowareaList[2].name,
        address: this.address,
        shopphone: this.tel,
        openat: this.time1,
        closeat: this.time2,
        imagesurl: joins,
        // deliveryscope: this.range,
        deliveryfee: this.sendcost,
        feescope: this.sendmoney,
        remark: this.introduce,
        state: this.state,
      })
        .then(res => {
          if (res.data.code == 1) {
            Toast.success('修改成功')
            this.getshopInfo()
          }
        })
        .catch((err) => {
          console.error("加载失败" + err);
        })
    },
  },
  created () {
    this.getshopInfo()
  },
}
</script>

<style lang="less" scoped>
.shop {
  &-info {
    width: 100%;
    &-shopimg {
      /deep/ .van-uploader__upload,
      /deep/ .van-uploader__preview,
      /deep/ .van-uploader__preview-image {
        border-radius: 15px;
      }
      /deep/ .van-uploader__upload,
      /deep/ .van-uploader__preview-image {
        width: 1.8rem;
        height: 1.8rem;
      }
    }
    /deep/ .van-field__label,
    /deep/ .van-cell__title {
      color: black;
    }
    &-introduce {
      /deep/ .van-field__label {
        width: 20%;
      }
      /deep/ .van-field__body {
        background-color: #f6f6f6;
        border-radius: 10px;
        padding: 20px;
      }
    }
    .location-o {
      margin-left: 10px;
    }
  }
  &-save {
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: center;
    padding: 40px 0 60px;
    margin: 0 auto;
    /deep/ .van-button {
      width: 80%;
      height: 80px;
      font-weight: bold;
      font-size: 30px;
    }
  }
  .spacing {
    width: 100%;
    height: 20px;
    background-color: #f6f6f6;
  }
}
</style>